import React, { PureComponent } from 'react';
import { Button, Progress } from 'antd';
import 'antd/dist/antd.css';
import * as tf from '@tensorflow/tfjs';
import { file2img, img2x } from "./utils";
import { div, train } from '@tensorflow/tfjs';
import intro from "./intro";
const DATA_URL = `http://${window.location.hostname}:8091/output/`;//window.location.href;
class App extends PureComponent {

    state = {};

    async componentDidMount() {
        this.model = await tf.loadLayersModel(DATA_URL + "model.json");
        //this.model.summary();--查看你这个模型
        this.CLASSES = await fetch(DATA_URL + "classes.json").then(res => res.json());
    }

    predict = async (file) => {
        const img = await file2img(file);
        this.setState({ imgSrc: img.src })
        setTimeout(() => {
            const pred = tf.tidy(() => {
                const x = img2x(img);
                return this.model.predict(x);
            })
            const results = pred.arraySync()[0]
                .map((score, i) => ({ score, lable: this.CLASSES[i] }))
                .sort((a, b) => b.score - a.score);
            console.log(results);
            this.setState({ results: results })
        }, 1)
    }

    renderResult = (item) => {
        const finalScore = Math.round(item.score * 100);
        return (
            <tr key={item.lable}>
                <td style={{ width: 220, padding: "5px 0",fontSize:"50px" }}>{item.lable}</td>
                <td><Progress  percent={finalScore} status={finalScore === 100 ? "success" : "normal"}></Progress></td>
            </tr>
            // <div className="type-row">
            //     <span className="type-row-left">{item.label}</span>
            //     <span className="type-row-right">
            //         <Progress percent={item.percent} status={finalScore === 100 ? "success" : "normal"} />
            //     </span>
            // </div>
        )
    }

    render() {
        const { imgSrc, results } = this.state;
        const finalItem = results && { ...results[0], ...intro[results[0].lable] };
        return (
            <div>
                <Button
                    type='primary'
                    size="large"
                    style={{ width: '100%',height:"150px" }}
                    onClick={() => this.upload.click()}
                >点击上传</Button>
                <input type="file"
                    onChange={e => this.predict(e.target.files[0])}
                    ref={el => { this.upload = el }}
                    style={{ display: 'none' }}
                ></input>
                {imgSrc && <div style={{ marginTop: '20px',height:"400px",overflow:"hidden" }}>
                    <img src={imgSrc} style={{ width: '100%' }}></img>
                </div>}
                {finalItem && <div style={{ marginTop: 20,fontSize: "60px" }}>识别结果:</div>}
                {finalItem && <div style={{ display: "flex", alignItems: "flex-start", marginTop: 20 }}>
                    <img src={finalItem.icon} width={120} />
                    <div>
                        <h2 style={{ color: finalItem.color,fontSize:"70px" }}>{finalItem.lable}</h2>
                        <div style={{ color: finalItem.color,fontSize:"50px" }}>{finalItem.intro}</div>
                    </div>
                </div>}
                {results && <div style={{ marginTop: 20 }}>
                    <table style={{ width: "100%" }}>
                        <tbody>
                            <tr>
                                <td className="type-row-left" style={{ fontSize: "60px" }}>类别</td>
                                <td className="type-row-right" style={{ fontSize: "60px" }}>匹配度</td>
                            </tr>
                            {results.map(this.renderResult)}
                        </tbody>
                    </table>
                </div>}
                {/* {results && results.length &&
                    results.map((predictItem) => (
                        <div className="type-row">
                            <span className="type-row-left">{predictItem.label}</span>
                            <span className="type-row-right">
                                <Progress percent={predictItem.percent} />
                            </span>
                        </div>
                    ))} */}
            </div>
        )
    }
}
export default App;